/* ==========================================================================
   rckgm-clubrunner.css
   Rotary Club of Kowloon Golden Mile (RCKGM)
   ClubRunner public-site OVERRIDE — not a full theme.

   Upload: Website Style Sheets → Add Website CSS File
   Theme Setting: leave ENABLED. Do not click Disable.
   Activate last: upload with Make Active off, check Home, then Make Active.
   Recovery: deactivate this file. Keep the system theme enabled.

   Live site (Oct 2026): BootstrapLayout-1 / Millennium / Gold
   https://portal.clubrunner.ca/13282
   No custom CSS was loaded before this file.

   Brand: Rotary Brand Center / Logos at a Glance 2025
   Azure #0067C8  Royal #17458F  Gold #F7A81B
   Do not recolor the Rotary lockup.
   ========================================================================== */

:root {
  --rckgm-azure: #0067c8;
  --rckgm-azure-dark: #0056a8;
  --rckgm-royal: #17458f;
  --rckgm-gold: #f7a81b;
  --rckgm-gold-dark: #d48d0f;
  --rckgm-sky: #00a2e0;
  --rckgm-powder: #b9d9eb;
  --rckgm-charcoal: #54565a;
  --rckgm-cloud: #d6d1ca;
  --rckgm-white: #ffffff;
  --rckgm-ink: #222222;
  --rckgm-font: "Open Sans", Helvetica, Arial, sans-serif;
  --rckgm-display: "Open Sans Condensed", "Open Sans", Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Type
   Theme already loads Open Sans. Story cards currently force Times New Roman
   via inline style — override that.
   -------------------------------------------------------------------------- */

body#bodyContent {
  font-family: var(--rckgm-font);
  color: var(--rckgm-ink);
}

.PageWidget .h2.widget-title,
.PageWidget .h2.widget-title h1,
.PageWidget .h2.widget-title span,
.PageWidget .boxHeaderContainer1 .widget-title,
.PageWidget .boxHeaderContainer2 .widget-title {
  font-family: var(--rckgm-display) !important;
  font-weight: 700;
  color: var(--rckgm-azure) !important;
}

main.main-content-wrapper h2,
main.main-content-wrapper h3,
.HomeContentWrapper h2,
.HomeContentWrapper h3 {
  color: var(--rckgm-royal);
}

/* --------------------------------------------------------------------------
   2. Login / search strip  (theme: #005DAA)
   -------------------------------------------------------------------------- */

.login-band {
  background-color: var(--rckgm-royal);
}

.loginbar,
.loginbar a,
.login-area a,
.login-area .logout-link {
  color: var(--rckgm-white);
}

.loginbar a:hover,
.loginbar a:focus,
.login-area a:hover,
.login-area a:focus {
  color: var(--rckgm-gold);
}

.login-band #searchString {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--rckgm-ink);
}

/* --------------------------------------------------------------------------
   3. Header + nav  (theme: gold bar #F7A81B, royal type #17458F)
   -------------------------------------------------------------------------- */

nav.navbar.navbar-default {
  background-color: var(--rckgm-azure);
  border-color: transparent;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-text,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a.menu-item,
a.menu-item.menu-item-primary {
  color: var(--rckgm-white);
  background-color: transparent;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: var(--rckgm-royal);
  background-color: var(--rckgm-gold);
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: rgba(255, 255, 255, 0.45);
  background-color: transparent;
}

.navbar-default .dropdown-menu {
  border-top: 3px solid var(--rckgm-gold);
}

.navbar-default .dropdown-menu > li > a {
  color: var(--rckgm-royal);
  font-family: var(--rckgm-font);
}

.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > li > a:focus {
  color: var(--rckgm-white);
  background-color: var(--rckgm-azure);
}

.navbar-default .navbar-toggle {
  border-color: rgba(255, 255, 255, 0.65);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: var(--rckgm-royal);
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--rckgm-white);
}

/* --------------------------------------------------------------------------
   4. Brand / logo — size only
   -------------------------------------------------------------------------- */

.navbar-brand img,
a.navbar-brand img {
  max-height: 56px;
  width: auto;
  filter: none;
}

/* --------------------------------------------------------------------------
   5. Hero / carousel
   -------------------------------------------------------------------------- */

.MainWidgetWrapper.carousel .carousel-content,
.MainWidgetWrapper.carousel .content-block,
.MainWidgetWrapper.carousel .carousel-caption {
  text-shadow: 0 1px 2px rgba(23, 69, 143, 0.45);
}

.MainWidgetWrapper.carousel .swiper-pagination-bullet-active {
  background: var(--rckgm-gold);
}

.MainWidgetWrapper.carousel .swiper-button-prev,
.MainWidgetWrapper.carousel .swiper-button-next {
  color: var(--rckgm-gold);
}

/* --------------------------------------------------------------------------
   6. Cards / stories / events
   Live markup is article.card.card-cr — not card-default.
   -------------------------------------------------------------------------- */

.card.card-cr {
  border-top: 3px solid var(--rckgm-azure);
}

.card.card-cr .card-title,
.card.card-cr .card-title a,
.card.card-cr a.title {
  font-family: var(--rckgm-font) !important;
  color: var(--rckgm-royal) !important;
}

.card.card-cr .card-title a:hover,
.card.card-cr .card-title a:focus,
.card.card-cr a.title:hover,
.card.card-cr a.title:focus {
  color: var(--rckgm-azure) !important;
}

.card.card-cr .event-date,
.card.card-cr .card-text-meta,
.card.card-cr .card-meta-item {
  color: var(--rckgm-charcoal);
}

/* --------------------------------------------------------------------------
   7. Buttons  (theme primary #F0AB31, info #0083EF)
   Gold is a jewel colour — buttons only, not body text.
   -------------------------------------------------------------------------- */

.btn-primary,
.btn.btn-primary {
  color: var(--rckgm-white);
  background-color: var(--rckgm-gold);
  border-color: var(--rckgm-gold);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  color: var(--rckgm-white);
  background-color: var(--rckgm-gold-dark);
  border-color: var(--rckgm-gold-dark);
}

.btn-info,
.btn.btn-info,
a.btn.button-link.btn-info {
  color: var(--rckgm-white);
  background-color: var(--rckgm-azure);
  border-color: var(--rckgm-azure);
}

.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn.btn-info:hover,
.btn.btn-info:focus,
a.btn.button-link.btn-info:hover,
a.btn.button-link.btn-info:focus {
  color: var(--rckgm-white);
  background-color: var(--rckgm-azure-dark);
  border-color: var(--rckgm-azure-dark);
}

.predefined-button .btn,
.predefined-button a.btn {
  font-family: var(--rckgm-display);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   8. In-page links (public content only)
   -------------------------------------------------------------------------- */

main.main-content-wrapper a:not(.btn):not(.menu-item):not(.navbar-brand) {
  color: var(--rckgm-azure);
}

main.main-content-wrapper a:not(.btn):not(.menu-item):hover,
main.main-content-wrapper a:not(.btn):not(.menu-item):focus {
  color: var(--rckgm-royal);
}

/* --------------------------------------------------------------------------
   9. Club info widget
   Leave the red greeting alone — that is pasted in the Designer on purpose.
   -------------------------------------------------------------------------- */

.MainWidgetWrapper.ClubInfo .clubinfo-header .text-size-h2 {
  font-family: var(--rckgm-display);
}

/* --------------------------------------------------------------------------
   10. Footer  (theme: #333)
   -------------------------------------------------------------------------- */

footer.footer-band {
  background-color: var(--rckgm-royal);
  color: var(--rckgm-white);
}

footer.footer-band .WebsiteFooter,
footer.footer-band .WebsiteFooter p,
footer.footer-band .website-footer,
footer.footer-band .website-footer p {
  color: var(--rckgm-white);
}

footer.footer-band .WebsiteFooter h4,
footer.footer-band .website-footer h4 {
  color: var(--rckgm-gold);
  font-family: var(--rckgm-display);
  font-weight: 700;
}

footer.footer-band .WebsiteFooter a,
footer.footer-band .website-footer a {
  color: var(--rckgm-powder);
}

footer.footer-band .WebsiteFooter a:hover,
footer.footer-band .WebsiteFooter a:focus,
footer.footer-band .website-footer a:hover,
footer.footer-band .website-footer a:focus {
  color: var(--rckgm-gold);
}

.system-footer,
.system-footer #rights {
  color: var(--rckgm-white);
}

.system-footer a {
  color: var(--rckgm-powder);
}

.system-footer a:hover,
.system-footer a:focus {
  color: var(--rckgm-gold);
}

/* --------------------------------------------------------------------------
   11. Focus — keep a visible ring
   -------------------------------------------------------------------------- */

a:focus,
button:focus,
.btn:focus,
.navbar-default .navbar-nav > li > a:focus,
.login-band #searchString:focus {
  outline: 2px solid var(--rckgm-gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   12. Mobile — Millennium collapses at 768px
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: var(--rckgm-white);
  }

  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: var(--rckgm-royal);
    background-color: var(--rckgm-gold);
  }

  .navbar-default .navbar-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .navbar-brand img,
  a.navbar-brand img {
    max-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .MainWidgetWrapper.carousel .swiper-container,
  .MainWidgetWrapper.carousel .swiper-slide {
    transition: none;
  }
}